<template>
  <div id="home-page">
    <v-widget title="站点通知" contentBg="white" class="mb-3">
      <div
        slot="widget-content"
      >本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理</div>
    </v-widget>
    <v-card v-for="article in articles" :key="article.id" class="elevation-1 mb-3 pa-2" tile>
      <v-card-title primary-title>
        <div>
          <div class="headline">{{ article.title }}</div>
          <p class="text-xs-left grey--text">
            {{ article.updated_at }}&nbsp;/&nbsp;
            <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
            <v-icon small>far fa-comments</v-icon>&nbsp;123&nbsp;
          </p>
        </div>
      </v-card-title>
      <v-card-text>{{ article.description }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="red">分享</v-btn>
        <v-btn flat color="indigo">概览</v-btn>
        <v-spacer></v-spacer>
        <v-btn flat :to="{name:'article',params:{id:article.id}}">
          <v-icon small>fas fa-eye</v-icon>&nbsp;查看全文
        </v-btn>
      </v-card-actions>
    </v-card>
    <div class="text-xs-center">
      <v-pagination v-model="page" :length="6"></v-pagination>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import VWidget from '@/components/VWidget'
export default {
  data: () => ({
    show: false,
    page: 1,
    articles: []
  }),
  components: { VWidget },
  methods: {
    init() {
      let _this = this
      request.get('/posts').then(res => {
        _this.articles = res.data.posts
      })
    }
  },
  created() {
    this.init()
  },
  mounted() {}
}
</script>

